import React, { Fragment } from 'react';
import {
  makeStyles,
  Box,
  BoxProps,
  Avatar,
  Typography,
  Divider,
} from '@material-ui/core';
import Skeleton from '@material-ui/lab/Skeleton';

const useStyles = makeStyles({});

interface IProps {
  username?: string;
  face?: string;
  content?: string;
  email?: string;
  website?: string;
  time?: string;
}

const CommentItem: React.FC<IProps & BoxProps> = props => {
  const { username, content, email, website, time } = props;

  const userNameElement = !!username ? (
    <Typography variant="h6" component="h5" color="initial">
      {username}
    </Typography>
  ) : (
    <Skeleton width={48} />
  );

  return (
    <Box {...props} display="flex" flexDirection="row">
      <Box marginRight={1.2} marginTop={0.5} clone>
        {!!username ? (
          <Avatar src={props.face}>{props.username}</Avatar>
        ) : (
          <Skeleton variant="rect" animation="wave" />
        )}
      </Box>

      <Box display="flex" flexDirection="column" flex={1}>
        {website ? (
          <a
            style={{
              color: 'black',
            }}
            href={website.indexOf('://') === -1 ? `http://${website}` : website}
            target="_blank"
          >
            {userNameElement}
          </a>
        ) : (
          userNameElement
        )}
        {time ? (
          <Typography
            variant="subtitle2"
            component="span"
            color="textSecondary"
            gutterBottom
          >
            发表于：{props.time}
          </Typography>
        ) : (
          <Skeleton width={64} />
        )}
        {content ? (
          <Typography variant="body1" gutterBottom>
            {props.content}
          </Typography>
        ) : (
          <Fragment>
            <Skeleton />
            <Skeleton width={120} />
          </Fragment>
        )}

        {/* <Typography 
        variant="caption" 
        display="block" 
        gutterBottom
        color="textSecondary" 
      >
        邮箱：{props.email}
        &nbsp; &nbsp; &nbsp; 
        个人主页：
        <a href={props.website}>
          {props.website}
        </a>
      </Typography> */}

        <Divider light />
      </Box>
    </Box>
  );
};

export default CommentItem;
